<!-- subpkg_consult/description/index.vue -->
<!-- ctrl+k ctrl+0  一键折叠 -->
<script lang="ts" setup>
  import { useConsultStore } from '@/stores/consult'
  import { request } from '@/utils/http'
  import { ref } from 'vue'

  // const bingqing = ref('')
  // 病情描述数据
  const illnessInfo = ref<{
    illnessDesc: string
    illnessTime: number
    consultFlag: number
    pictures: {
      id: string
      url: string
    }[]
  }>({
    illnessDesc: '',
    illnessTime: 1, // 默认患病时间一周内
    consultFlag: 0, // 默认未就诊过
    pictures: [
      // {
      //   id: 1,
      //   url: 'https://img2.baidu.com/it/u=2427333929,299356392&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1721408400&t=755417cfd97bef0465788464312d6f44',
      // },
    ], // 选择的图片
  })

  // 患病时长
  const illnessTimes = [
    { value: 1, text: '一周内' },
    { value: 2, text: '一月内' },
    { value: 3, text: '半年内' },
    { value: 4, text: '半年以上' },
  ]

  // 是否就诊过
  const consultFlags = [
    { value: 1, text: '就诊过' },
    { value: 0, text: '没有就诊过' },
  ]

  // uni全端项目上传图片
  // 1.uni-file-picker组件实现选取照片(自己根据平台不同处理不同的选择姿势)      picker模块  => 拷贝到沙箱 => 上传  request.upload
  // 2.获取选中图片完成请求  上传到服务器

  // 手动上传图片
  const onSelect = async (e: any) => {
    // 选择文件后触发这个事件 这个函数
    console.log(e.tempFilePaths[0]) // 选中的图片

    // 上传到服务器 (封装请求)
    // 上传比较特殊
    // 接口中是post方式  => luch-request 中upload
    const res = await request.upload<null, { id: string; url: string }>('/upload', {
      // 1. 指定后端接收图片的键名   file
      name: 'file',
      // 2. 携带图片过去  e.tempFilePaths[0]
      filePath: e.tempFilePaths[0],

      // file: e.tempFilePaths[0] => 不是这样的!!!错的!!!
    })
    console.log(res) // 返回一个对象  id   url

    illnessInfo.value.pictures.push(res)
  }

  // 简历:
  // 本科  应届(3年)  1年  2年  3年  4年
  // 专科  应届(3年)  1年  2年  3年  4年

  // 简历:
  // 1. 错别字      harmonyOS  TS   AGC
  // 2. 时间点      项目时间落在工作时间(2022.9-2024.06)
  // 3. 项目描述    难点  亮点
  // 4. 项目技术栈  不要写错了    鸿蒙的项目  uni
  // 5. 名字-几年-鸿蒙开发-现居上海-手机号-邮箱-接受出差-随时到岗.pdf

  // 下一步
  const store = useConsultStore() // 问诊仓库

  const props = defineProps<{ depId: string; type: string; illnessType: string }>()
  const nextStep = () => {
    // 存数据 illnessInfo
    store.setIllnessInfo(illnessInfo.value) // 4
    store.setDepId(props.depId) // 1
    store.setType(props.type) // 1
    store.setIllnessType(props.illnessType) // 1

    // 跳转到下一页面

    // 问诊流程中 如果进入到患者列表页面  => 选中患者    带个参数进来
    // 正常进入患者列表中 => 没有选中患者功能
    uni.navigateTo({ url: '/subpkg_archive/list/index?type=consult' })
  }

  // 一进入页面 先看看缓存中有么有数据
  // 有数据  给用户提示 要不要回复数据
  if (store.illnessInfo.illnessDesc) {
    uni
      .showModal({
        title: '温馨提示',
        content: '是否需要回复数据',
        showCancel: true,
        cancelText: '取消',
        cancelColor: '#000000',
        confirmText: '确定',
        confirmColor: '#3CC51F',
      })
      .then((res) => {
        // console.log(res)
        if (res.confirm) {
          // 回复数据
          illnessInfo.value = store.illnessInfo
        }
      })
  }
</script>

<template>
  <scroll-view>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>

      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <!-- @State xx: string = '' -->
          <!-- TextInput()  TextArea({text: $$this.xx})  -->
          <!-- 收集用户病情 -->
          <uni-easyinput
            type="textarea"
            :input-border="false"
            v-model="illnessInfo.illnessDesc"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            v-for="item in illnessTimes"
            :key="item.value"
            class="tag"
            @click="illnessInfo.illnessTime = item.value"
            :class="{ active: illnessInfo.illnessTime === item.value }"
          >
            {{ item.text }}
          </text>
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            v-for="item in consultFlags"
            :key="item.text"
            class="tag"
            @click="illnessInfo.consultFlag = item.value"
            :class="{ active: illnessInfo.consultFlag === item.value }"
          >
            {{ item.text }}
          </text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <!-- 上传组件: 关闭自动上传(:auto-upload="false") 实现手动上传(harmony/全端uni) -->
        <uni-file-picker
          v-model="illnessInfo.pictures"
          :auto-upload="false"
          @select="onSelect"
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <!-- v-if="illnessInfo.illnessDesc"  -->
      <!-- 只有写了描述文字 才能启用下一步 -->
      <button :disabled="illnessInfo.illnessDesc === ''" class="uni-button" @click="nextStep">
        下一步
      </button>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
